<template>
    <div>
        <div style="padding: 0px 0 ;">
            <el-input v-model="input" style="width:200px;" placeholder="根据订单号查找" suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <el-table :data="tableData" style="height: 500px;overflow: auto;margin-top: 30px;" >
            <el-table-column label="" type="expand" width="20px">
                <template slot-scope="props">
                    <el-table label-position="left" v-if="props.row.diagnosisId!=null" :data="props.row.children" inline class="demo-table-expand" style="width: 60%;margin-left: 50px;">
                        <el-table-column prop="petName" label="宠物" width="180">
                      </el-table-column>
                      <el-table-column prop="checkName" label="药品/项目" width="180" >
                      </el-table-column>
                      <el-table-column prop="count" :label="props.row.children[0].sourceType==1?'数量（盒）':'数量（次）'" width="200">
                      </el-table-column>
                      <el-table-column prop="singlePrice" label="单价（元）" width="180" >
                      </el-table-column>
                    </el-table>
                    <el-table label-position="left" v-else :data="props.row.children" inline class="demo-table-expand" style="width: 60%;margin-left: 50px;">
                      <el-table-column prop="checkName" label="药品名称" width="180" >
                      </el-table-column>
                      <el-table-column prop="count" label="数量（盒）" width="200">
                      </el-table-column>
                      <el-table-column prop="singlePrice" label="单价（元）" width="180" >
                      </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="订单号" width="230">
            </el-table-column>
            <el-table-column prop="createTime" label="费用产生时间" width="250">
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" width="140">
            </el-table-column>
            <el-table-column  label="订单类型" width="80">
                <template slot-scope="props">{{ props.row.diagnosisId==null?'平台购药':'医师开单' }}</template>
            </el-table-column>
            <el-table-column prop="payType" label="支付方式" width="140">
                <template slot-scope="{row}">
                    <el-tag v-if="row.payType == 0" type="danger">微信</el-tag>
                    <el-tag v-if="row.payType == 1" type="success">支付宝</el-tag>
                    <el-tag v-if="row.payType == 2" type="warning">现金</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="payStatus" label="支付状态" width="100">
                <template slot-scope="{row}">
                    <el-tag v-if="row.payStatus == 0" type="danger">待支付</el-tag>
                    <el-tag v-if="row.payStatus == 1" type="success">已支付</el-tag>
                    <el-tag v-if="row.payStatus == 2" type="warning">已过期</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="payPrice" label="订单金额" width="80">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='我在想想'
                        icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="deleteById(scope.row.drugId)">
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
      


    </div>
</template>

<script>
export default {
    name: "User",
    data() {
        return {
            tableData: [],
            currentPage4: 4,
            total: 0,
            page: 1,
            pageSize: 6,
            input: '',
            dialogFormVisible: false,
            form: '',
            roles: []
        }
    },
    created() {
        this.load();
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        cancelDialog() {
            this.dialogFormVisible = false;
        },


        deleteById(id) {
            this.request.delete(`/order/${id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.load()
                } else {
                    this.$message.success('删除失败')
                }
            })
        },
        save() {//新增提交数据方法
            console.log(this.form);
            this.request.post("/drug", this.form).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load();
                } else {
                    this.$message.error("保存失败")
                }
            })
            this.dialogFormVisible = false
            this.load();
        },
        handEdit(row) {//打开编辑窗口
            this.form = row
            this.dialogFormVisible = true
        },
        reset() {//重置按钮方法
            this.input = "";
            this.load();
        },
        load() {//表格刷新
            this.request.get("/order/page", {
                params: {
                    name: this.input,
                    page: this.page,
                    pageSize: this.pageSize,

                }
            }).then(res => {
                // 转化为Table的数据格式
                this.tableData = res.data.records.map(record => {
                    return {
                        id: record.id,
                        code: record.code,
                        payType: record.payType,
                        customerId: record.customerId,
                        payPrice: record.payPrice,
                        payStatus: record.payStatus,
                        diagnosisId: record.diagnosisId,
                        customerName: record.customerName,
                        createTime: record.createTime,
                        updateTime: record.updateTime,
                        children: record.orderDetailList.map(detail => {
                            return {
                                id: detail.id,
                                orderId: detail.orderId,
                                sourceId: detail.sourceId,
                                sourceType: detail.sourceType,
                                count: detail.count,
                                singlePrice: detail.singlePrice,
                                petName: detail.petName,
                                userName: detail.userName,
                                checkName: detail.checkName
                            };
                        })
                    };
                });
                console.log("123", this.tableData)
                this.total = res.data.total;
            })
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.load();
        }
    }
}
</script>

<style sty>
.warning-row {
    background: oldlace;
}

.success-row {
    background: #f0f9eb;
}

.el-table::before {
    height: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>